<template>
	<view class="content">
		<view class="songTop">
			<view class="songTop_one">
				<image :src="songObj.coverImgUrl" mode=""></image>
				<text class="imgText">{{songObj.playCount}}</text>
			</view>
			<view class="songTop_two">
				<text class="songTop_two_text">{{songObj.name}}</text>
				<view class="logoimg">
					<image :src="songObj2.avatarUrl" mode="widthFix"></image>
					{{songObj2.nickname}}
				</view>
				<view class="text_one">
					{{songObj.description}}
					<image src="../../static/右箭头.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="shareOne">
			<image src="../../static/分享.png" mode=""></image>分享给微信好友
		</view>
		<view class="share">
			<view class="sharePlay">
				<image src="../../static/播放黑.png" mode=""></image>播放全部<text>(共{{songDetails.length}}首)</text>
			</view>
			<view class="sharePlayList" v-for="(item,index) in songDetails" :key="item.id" @click="single"
				:data-id="item.id">
				<view class="singerNameBox">
					<text class="songId">{{index+1}}</text><text class="songName">{{item.name}} </text>
					<view class="singerName">
						{{item.ar[0].name}}
					</view>
				</view>
				<view>
					<image src="../../static/播放黑.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSongList,
		getSingleDetails
	} from "../../ajax/ajax.js"
	export default {
		data() {
			return {
				songObj: {},
				songObj2: {},
				songList: [],
				songDetails: []
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			getSongList({
				id: option.id
			}).then((res) => {
				console.log(res.playlist.tracks);
				this.songObj = res.playlist
				this.songObj2 = res.playlist.creator
				this.songList = res.privileges
				this.songDetails = res.playlist.tracks
			})
		},
		methods: {
			single(e) {
				console.log(e.currentTarget.dataset.id);
				const id = e.currentTarget.dataset.id
				uni.navigateTo({
					url: "/pages/single/single?id=" + id,
					animationType: 'pop-in',
					animationDuration: 200
				})
			}
		}
	}
</script>

<style>
	.singerNameBox {
		position: relative;
	}

	.singerName {
		position: absolute;
		font-size: 20rpx;
		color: #666;
		top: 40rpx;
		left: 50rpx;
	}

	.sharePlayList image {
		width: 30rpx;
		height: 30rpx;
	}

	.songName {
		display: inline-block;
		width: 550rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.sharePlayList .songId {
		display: inline-block;
		width: 50rpx;
		color: #666;
	}

	.sharePlayList {
		padding: 20rpx 10rpx;
		display: flex;
		font-size: 28rpx;
		align-items: center;
		justify-content: space-between;
		margin: 10rpx 0;
	}

	.shareOne {
		padding: 10rpx 0;
		width: 280rpx;
		background-color: rgba(102, 102, 102, .3);
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto;
		border-radius: 25rpx;
		color: #fff;
		font-size: 20rpx;
	}

	.shareOne image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.sharePlay {
		font-size: 26rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.sharePlay image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.sharePlay text {
		font-size: 14rpx;
		color: #888;
	}

	.share {
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		padding: 20rpx;
		margin-top: 30rpx;
	}

	.songTop_two_text {
		font-size: 30rpx;
	}

	.text_one image {
		width: 20rpx;
		height: 20rpx;
	}

	.text_one {
		font-size: 20rpx !important;
		color: #cfcfcf;
	}

	.songTop_two {
		margin-left: 40rpx;
		font-size: 18rpx;
	}

	.logoimg {
		margin: 20rpx 0;
		display: flex;
		align-items: center;
		color: #cfcfcf;
	}

	.logoimg image {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.content {
		background-color: #1E90ff;
	}

	.songTop {
		padding: 40rpx 40rpx;
		color: #fff;
		display: flex;
	}

	.songTop_one image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 15rpx;
	}

	.songTop_one {
		position: relative;
	}

	.imgText {
		position: absolute;
		left: 0;
	}
</style>
